<template>
  <div class="pad-b-20">
    <div class="flex-col">
      <span class="font-w font-16 mar-t-30">基本信息</span>
      <div class="list-header font-14 font-w flex mar-t-20">
        <span>商品信息</span>
        <span>规格</span>
        <span>数量</span>
        <span>价格</span>
        <span>重量</span>
        <span>小计</span>
      </div>

      <div class="list-box">
        <div v-for="(item, index) of dataObj.orderGoodsList" :key="index" class="goods-info pad-t-13 pad-b-20 flex">
          <div class="flex pad-l-10">
            <img class="width-80 height-80" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic153.nipic.com%2Ffile%2F20180116%2F8737320_170317603036_2.jpg&refer=http%3A%2F%2Fpic153.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646876869&t=735c4dec0d8b574f5a0b36b9c548c37d" alt="">
            <div class="flex-col mar-l-10 position-r mar-t-15">
              <span class="font-12 font-color-3 line-1 goods-title">{{ item.goodsTitle }}</span>
              <span class="font-12 font-color-6 mar-t-4">货号：{{ item.goodsCode }}</span>
              <!-- <span class="font-12 address-tag v-align-c">杭州</span> -->
            </div>
          </div>
          <div class="v-align-c">
            <span class="font-12 font-color-6">{{ item.skuDetail }}</span>
          </div>
          <div class="v-align-c">
            <span class="font-12 font-color-6">{{ item.goodsNum }}</span>
          </div>
          <div class="flex-col">
            <span class="font-14 font-color-3">￥{{ item.goodsPayAmount }}</span>
            <span class="font-12 font-color-6 mar-t-4">含运费{{ item.goodsFreight }}</span>
          </div>
          <div class="flex-col">
            <span class="font-12 font-color-6">{{ item.weight }}</span>
            <!-- <router-link :to="{name: 'order-detail', params: {status: 1}}">
              <span class="font-12 font-color-3 mar-t-6 cursor-p">订单详情</span>
            </router-link> -->
          </div>
          <div class="flex-col font-12">
            <span class="cursor-p">{{item.goodsTotalPrice}}</span>
            <!-- <span class="cursor-p mar-t-6">删除订单</span> -->
          </div>
        </div>
      </div>
    </div>
    <div class="flex-col font-14 font-color-3 count-info-box mar-t-30">
      <span class="mar-t-2">商品小计: {{ dataObj.goodsAmount }}元</span>
      <span class="mar-t-3">运费: {{ dataObj.freight }}元</span>
      <span class="mar-t-5">实际支付: <span class="font-16 font-w" style="color: #FF500B">{{dataObj.orderPrice}}</span>元</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    dataObj: Object
  },
  setup() {

  }
})
</script>

<style lang="scss" scoped>
.order-status-box {
  width: 1140px;
  height: 170px;
  background: #fafafa;
  padding: 24px 50px;
  box-sizing: border-box;
}
.btn-group-box {
  &>div:nth-child(1) {
    width: 100px;
    height: 40px;
    background: #FF6000;
    border-radius: 4px;
    color: #fff;
  }
  &>div:nth-child(2) {
    width: 100px;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    color: #323233;
  }
}
.order-info-box {
  width: 1140px;
  height: 148px;
  border: 1px solid #F5F5F5;
  .content-box {
    padding-left: 19px;
    padding-top: 15px;
  }
}
  $darkBlue: #182245;
  $fontcolor: #323233;
  $td1: 334px;
  $td2: 157px;
  $td3: 155px;
  $td4: 156px;
  $td5: 157px;
  .list-header {
    width: 1140px;
    height: 48px;
    background: #F9F9F9;
    border: 1px solid #F5F5F5;
    color: $fontcolor;
    padding-left: 19px;
    &>span {
      display: flex;
      align-items: center;
    }
    &>span:nth-child(1) {
      width: $td1;
    }
    &>span:nth-child(2) {
      width: $td2;
    }
    &>span:nth-child(3) {
      width: $td3;
    }
    &>span:nth-child(4) {
      width: $td4;
    }
    &>span:nth-child(5) {
      width: $td5;
    }

  }
  .list-box {
    border: 1px solid #f5f5f5;
  }
  .user-info {
    color: $fontcolor;
  }
  .goods-info {
    border-bottom: 1px solid #f5f5f5;
    &>div:not(:first-child) {
      margin-top: 7px;
    }
    &>div:nth-child(1) {
      width: $td1;
    }
    &>div:nth-child(2) {
      width: $td2;
    }
    &>div:nth-child(3) {
      width: $td3;
    }
    &>div:nth-child(4) {
      width: $td4;
      justify-content: center;
    }
    &>div:nth-child(5) {
      width: $td5;
      justify-content: center;
    }
    &>div:nth-child(6) {
      justify-content: center;
    }
    .goods-title {
      width: 189px
    }
    .address-tag {
      background: $darkBlue;
      color: #fff;
      padding: 1px 5px;
      position: absolute;
      top: 40px;
    }
  }
.count-info-box {
  align-items: end;
}
</style>
